// 使用
/* Vue.directive('imageerror', {
  // v-imageerror 绑到哪里，dom 就是谁
  // binding.value 就是传递过来的默认的图片地址
  inserted(dom, binding) {
    // 图片加载失败其实会触发 onerror 事件
    dom.onerror = function() {
      // 把传递过来的默认的图片地址给 dom.src
      dom.src = binding.value
    }
  }
})

Vue.directive('color', {
  inserted(dom, binding) {
    dom.style.color = binding.value
  }
}) */
import defaultImg from '@/assets/common/head.jpg'

// 如果外界能拿到这 2 个对象，只需要循环进行 Vue.directive 的操作不就行了吗
export const imageerror = {
  // v-imageerror 绑到哪里，dom 就是谁
  // binding.value 就是传递过来的默认的图片地址
  inserted(dom, binding) {
    // 如果传递过来的没有，也给一个默认图片
    // console.log(binding.value, 233)
    if (!binding.value) {
      // !为什么这儿代码走了，效果没有出来？
      dom.src = defaultImg
    }
    // 图片加载失败其实会触发 onerror 事件
    dom.onerror = function() {
      // 把传递过来的默认的图片地址给 dom.src
      dom.src = defaultImg
    }
  },
  componentUpdated(dom, binding) {
    if (!binding.value) {
      dom.src = defaultImg
    }
  }
}
export const color = {
  inserted(dom, binding) {
    dom.style.color = binding.value
  }
}
